<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    my-element{
      font-size: 24px;
      border:2px solid #888888;
    }
  </style>
</head>
<body>
  <my-element myColor="#f00">红色的</my-element>
  <iframe id="my-iframe"></iframe>
</body>
<script>
    class MyElement extends HTMLElement{
      constructor(){
          super();
          this.addEventListener('mouseenter',e=>{
            this.mycolor = "#ccc";
          });
          this.addEventListener('mouseleave',e=>{
            this.mycolor = "#f00";
          })
      }
      get mycolor(){
        return this.getAttribute('mycolor');
      }
      set mycolor(color){
        this.setAttribute('mycolor',color);
      }
      static get observedAttributes(){
        return ['mycolor'];
      }
      connectedCallback(){
        console.log('connectedCallback');
      }
      disconnectedCallback(){
        console.log('disconnectedCallback');
      }
      attributeChangedCallback(attributeName, oldValue, newValue, namespace){
        console.log('attributeChangedCallback',attributeName,oldValue,newValue,namespace);
      }
      adoptedCallback(oldDocument, newDocument){
        console.log('adoptedCallback',oldDocument,newDocument);
      }
    }
    customElements.define('my-element',MyElement);
    //修改mycolor属性，会调用attributeChangedCallback钩子
    document.querySelector('my-element').mycolor = '#0f0';
   
    //将my-element获取，然后插入到iframe对应的document中，会触发adoptedCallback钩子
    var myEl = document.querySelector('my-element');
    document.querySelector('#my-iframe').contentWindow.document.body.appendChild(myEl);
  
  
     //调用remove方法会触发disconnectedCallback钩子
     document.querySelector('#my-iframe').contentWindow.document.querySelector('my-element').remove();
  </script>
</html>